<script setup lang="ts">
import { computed, ref } from 'vue';
import { useDateFormat, useNow } from '@vueuse/core';
import { useScrollLock } from './hooks/use-scroll-lock';
import { useAppStore, useSettingsStore, useUserStore } from '@/store';
import { Lock } from '@element-plus/icons-vue';
import logo from '@/assets/logo.svg';
import { ThemeEnum } from '@/enums/settings/ThemeEnum';
import { DeviceEnum } from '@/enums/settings/DeviceEnum';

defineOptions({ name: 'LockScreen' });

defineEmits<{ toLogin: [] }>();

const appStore = useAppStore();

const userStore = useUserStore();
const avatar = computed(() => userStore.userInfo.avatar || logo);
const userName = computed(() => userStore.userInfo.username || userStore.userInfo.nickname || '');

const now = useNow();
const meridiem = useDateFormat(now, 'A');
const hour = useDateFormat(now, 'HH');
const minute = useDateFormat(now, 'mm');
const date = useDateFormat(now, 'YYYY-MM-DD dddd');

const { exit, isFullscreen, toggle } = useFullscreen();

const showUnlockForm = ref(false);
const { lockScreenPassword } = storeToRefs(appStore);

const form = ref({
  password: '',
});

const validPass = computed(() => lockScreenPassword?.value === form?.value?.password);

const formRef = useTemplateRef('formRef');
async function handleSubmit() {
  await formRef.value?.validate();
  if (validPass.value) {
    appStore.unlockScreen();
    exit();
  } else {
    formRef.value?.resetFields();
  }
}
function toggleUnlockForm() {
  formRef.value?.resetFields();
  showUnlockForm.value = !showUnlockForm.value;
}
useScrollLock();

const settingsStore = useSettingsStore();
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK);
const changeTheme = () => {
  settingsStore.changeTheme(!isDark.value ? ThemeEnum.DARK : ThemeEnum.LIGHT);
};

const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
</script>

<template>
  <div class="bg-[var(--el-bg-color)] fixed left-0 right-0 top-0 bottom-0 z-[10000] size-full">
    <transition name="slide-left">
      <div v-show="!showUnlockForm" class="size-full font-[auto]">
        <div class="flex-center flex-col group my-4 cursor-pointer text-xl relative z-1" @click="toggleUnlockForm">
          <Lock class="size-5 transition-[scale] duration-300 group-hover:scale-125" />
          <span>点击解锁</span>
        </div>
        <div class="absolute top-5 right-10 z-2 flex flex-y-center">
          <div
            v-if="isDesktop"
            class="cursor-pointer p-2 transition-[scale] duration-300 hover:scale-120"
            @click="toggle"
          >
            <SvgIcon :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
          </div>
          <div class="cursor-pointer p-2 transition-[scale] duration-300 hover:scale-120" @click="changeTheme">
            <SvgIcon :icon-class="isDark ? 'sunny' : 'moon'" />
          </div>
        </div>
        <div class="flex h-4/5 flex-center px-[10%]" :class="isDesktop ? 'text-100' : 'flex-col text-50'">
          <div
            class="flex-center relative h-full flex-auto rounded-3xl text-center color-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] shadow-[var(--el-box-shadow-light)]"
            :class="isDesktop ? 'w-2/5' : 'w-full'"
          >
            <span class="absolute left-4 top-4 text-8 m-auto" style="border-bottom: 5px solid">
              {{ meridiem }}
            </span>
            <span style="text-shadow: 1px 1px 10px #000">
              {{ hour }}
            </span>
          </div>
          <div class="flex-center h-full" :class="isDesktop ? '' : 'absolute rotate-90 translate-x-10'">:</div>
          <div
            class="bg-accent flex-center h-full flex-auto rounded-3xl text-center bg-[var(--el-fill-color-light)] shadow-[var(--el-box-shadow-light)]"
            :class="isDesktop ? 'w-2/5' : 'w-full'"
            style="text-shadow: 1px 1px 10px #000"
          >
            {{ minute }}
          </div>
        </div>
      </div>
    </transition>

    <transition name="slide-right">
      <div v-if="showUnlockForm" class="flex-center size-full">
        <div
          class="flex flex-col flex-center w-[400px] p-15 rounded-3xl bg-[var(--el-fill-color-light)] shadow-[var(--el-box-shadow-light)]"
        >
          <el-avatar :size="80" :src="avatar" class="flex" />
          <el-text class="my-5 flex-x-center">{{ userName }}</el-text>
          <div class="flex mb-2 w-full items-center">
            <el-form ref="formRef" :model="form" class="w-full">
              <el-form-item
                prop="password"
                :rules="{ required: true, message: '请输入锁屏密码', trigger: ['blur', 'change'] }"
              >
                <el-input
                  v-model="form.password"
                  v-focus
                  placeholder="请输入锁屏密码"
                  type="password"
                  show-password
                  @keydown.enter.prevent="handleSubmit"
                />
              </el-form-item>
            </el-form>
          </div>
          <el-button class="w-full" type="primary" @click="handleSubmit">解 锁</el-button>
          <el-button class="my-3 mr-12px w-full" link type="success" @click="$emit('toLogin')">去登录</el-button>
          <el-button class="w-full mr-12px" type="info" link @click="toggleUnlockForm">返 回</el-button>
        </div>
      </div>
    </transition>

    <div class="absolute bottom-5 w-full text-center xl:text-xl 2xl:text-3xl">
      <div v-if="showUnlockForm" class="mb-2 text-3xl">
        {{ hour }}:{{ minute }}
        <span class="text-lg">{{ meridiem }}</span>
      </div>
      <div class="text-3xl">{{ date }}</div>
    </div>
  </div>
</template>
